<template>
  <div class="dynamicDetails">
    <div class="areaTitle">
      <i class="iconfont icon-return" @click="$router.push('/yuncun/')"></i>
      <p>动态</p>
    </div>
    <div class="dynamicBox">
      <!-- 内容 -->
      <div class="dynamicContent" v-if="dynamicList">
        <!-- 头像 -->
        <div class="headImg">
          <div class="head">
            <img :src="dynamicList.user.avatarUrl" alt />
          </div>
          <span>v</span>
        </div>
        <!-- 头像 end-->
        <div class="dynamicContent_top">
          <div class="title">
            <span class="name">{{dynamicList.user.nickname}}</span>
            <span>发布视频：</span>
            <p v-if="dynamicList.rcmdInfo.userReason">{{changeTime(dynamicList.eventTime)}}</p>
          </div>
        </div>
      </div>
      <!-- <i class="iconfont icon-you"></i> -->
      <!-- <div class="btn">
        <span>+</span>关注
      </div> -->
      <!-- 内容 end-->
    </div>
    <div class="main">
      <p>{{JSON.parse(dynamicList.json).msg}}</p>
    </div>
    <!-- 视频 -->
    <div class="detailsVideo" @click="changeVideo">
      <video
        id="mvVideo"
        :src="videoUrl"
        width="100%"
        height="100%"
        ref="getVideo"
        @timeupdate="changePlay"
        autoplay
      ></video>
      <!-- 中间按钮 -->
      <div v-show="isShow">
        <i class="iconfont icon-bofang1 bf1" @click.stop="play" v-show="isShowPlay"></i>
        <i class="iconfont icon-suspend_icon bf1" @click.stop="paused" v-show="!isShowPlay"></i>
      </div>

      <!-- 底部按钮 -->
      <div class="footerBtn" v-show="isShow">
        <P class="time">
          {{currentTime}}/
          <span>{{mvLength}}</span>
        </P>

        <i class="iconfont icon-shuaxin screen" @click="fullScreen"></i>
      </div>
      <van-slider
        class="jdt"
        v-model="progress"
        @change="onChange"
        active-color="#ee0a24"
        bar-height="3px"
        v-show="isShow"
      >
        <div slot="button" class="custom-button"></div>
      </van-slider>
    </div>
    <!-- 视频 end-->
    <!-- 评价，转发和点赞 -->
    <van-sticky :offset-top="50">
    <div class="funlist">
      <router-link :to="{name:'dynamicReview',params:{arr:list}}">
        评价
        <span>{{dynamicList.info.commentThread.commentCount}}</span>
      </router-link>
      <router-link :to="{name:'dynamicForward'}">
        转发
        <span>{{dynamicList.info.commentThread.shareCount}}</span>
      </router-link>
      <router-link :to="{name:'dynamicFabulous'}">
        赞
        <span>{{dynamicList.info.commentThread.likedCount}}</span>
      </router-link>
    </div>
    </van-sticky>
    <div class="funlistview">
      <router-view></router-view>
    </div>
    <comments :commentId2="videoID"></comments>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import comments from "@/views/video/mvDetails/Comment.vue";
export default {
  components: {comments},
  props: {},
  data() {
    return {
      dynamicList: "",
      videoUrl: "",
      isShowPlay: false,
      //   isShowPaused: true,
      isShow: false,
      show: false,
      mvDom: "",
      mvLength: "", // 视频总长度
      currentTime: "00:00 ", // 当前播放长度
      direction: true,
      commentList: "",
      num: 1,
      progress: 0,
      list: "",
      videoID:""
    };
  },
  watch: {},
  computed: {},
  methods: {
    changeTime: util.transformDate2,
    // 点击开始
    changeVideo() {
      this.isShow = !this.isShow;
      this.mvLength = util.time2(this.$refs.getVideo.duration);
      // console.log(util.time2(this.$refs.getVideo.currentTime));
      // console.log(util.time2(this.$refs.getVideo.duration));
    },
    // 点击播放
    play() {
      this.$refs.getVideo.play();
      this.isShowPlay = false;
      //   this.isShowPaused = true;
    },
    // 点击暂停
    paused() {
      this.$refs.getVideo.pause();
      //   this.isShowPaused = false;
      this.isShowPlay = true;
    },
    // 点击全屏
    fullScreen() {
      this.$refs.getVideo.webkitRequestFullScreen();
    },
    // 获取视频的长度和当前播放的长度
    getMvTime() {
      let mv = this.$refs.getVideo;
      //   console.log(util.time2(mv.currentTime));
      //   console.log(util.time2(mv.duration));
      // console.log(mv);
    },
    // 点击下拉显示
    changeDirection() {
      this.direction = !this.direction;
    },
    // 当前播放长度变化
    changePlay() {
      //  console.log(util.time2(this.$refs.getVideo.currentTime));
      this.currentTime = util.time2(this.$refs.getVideo.currentTime);
    },
    // 进度条
    onChange(value) {
      //  this.$toast('当前值：' + value);
      // this.$refs.getVideo.pause();
      // this.isShowPlay = true;
      console.log("拖动的值", this.progress);

      this.$refs.getVideo.currentTime =
        (this.progress * this.$refs.getVideo.duration) / 100;
    }
  },
  created() {
    this.dynamicList = JSON.parse(this.$route.params.arr);
    console.log(this.dynamicList);
    this.videoID = JSON.parse(this.dynamicList.json).video.videoId;
    this.list = this.$route.params.arr;
    // 视频播放请求
    this.$http("/video/detail", {
      params: {
        id: this.videoID
      }
    }).then(res => {
      console.log(res);
      this.videoUrl = res.data.urls[0].url;
    });
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.dynamicDetails {
  .areaTitle {
    width: 100%;
    height: vw(50);
    line-height: vw(30);
    display: flex;
    align-items: center;
    padding: 0 vw(10);
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 10;
    i {
      font-size: vw(26);
      padding-top: vw(3);
    }
    p {
      font-size: vw(18);
      font-weight: bold;
      padding-left: vw(10);
    }
  }
  .dynamicBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: vw(50) vw(20) 0;
    .dynamicContent {
      width: 70%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      .headImg {
        width: vw(50);
        position: relative;

        .head {
          width: vw(40);
          height: vw(40);
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
          }
        }
        span {
          position: absolute;
          bottom: 0;
          right: vw(6);
          display: block;
          width: vw(15);
          height: vw(15);
          line-height: vw(15);
          text-align: center;
          background: #f00;
          color: #fff;
          border-radius: 50%;
          font-size: vw(14);
        }
      }
      .dynamicContent_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          span {
            font-size: vw(14);
            color: #333;
          }
          .name {
            color: deepskyblue;
            padding-right: vw(6);
          }
          p {
            font-size: vw(12);
            color: #aaa;
          }
        }
      }
    }
    .btn {
      width: vw(60);
      height: vw(24);
      line-height: vw(24);
      text-align: center;
      background: #f00;
      border-radius: vw(20);
      color: #fff;
      font-size: vw(10);
    }
  }
  .main {
    p {
      font-size: vw(16);
      color: #000;
      padding: vw(10) vw(20);
    }
  }
  .detailsVideo {
    width: 100%;
    // height: vw(211);
    position: relative;
    // margin-left: 5%;

    .jdt {
      width: 90%;
      position: absolute;
      bottom: vw(1);
      left: 0;
      .custom-button {
        width: vw(10);
        height: vw(10);
        border-radius: 50%;
        background: #ee0a24;
      }
    }
    .bf1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: vw(30);
      color: #ccc;
    }

    .footerBtn {
      width: 100%;
      position: absolute;
      bottom: vw(14);
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 vw(20) 0 vw(10);
      .time {
        color: #fff;
        font-size: vw(12);
        span {
          color: #ccc;
        }
      }
      .screen {
        color: #fff;
        font-size: vw(20);
      }
    }
  }
  .funlist {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: vw(1) solid #ccc;
    background: #fff;
    a {
      height: vw(40);
      line-height: vw(40);
      text-align: center;
      color: #000;
      font-size: vw(16);
      span {
        font-size: vw(12);
        color: #999;
        margin-left: vw(4);
      }
    }
    .router-link-exact-active {
      color: red;
      font-size: vw(16);
      font-weight: bold;
      border-bottom: vw(2) solid red;
    }
  }
  .funlistview {
    width: 100%;
    padding: vw(10);
  }
}
</style>